<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div class="app">
    <h1>这是h1标签： {{ title }}</h1>
    <!-- 相当于修改元素的 textContent -->
    <h2 v-text="title">这是h1标签：</h2>
    <hr />

    <div v-text="inner"></div>
    <div>{{ inner }}</div>
    <!-- 修改元素的 innerHTML -->
    <div v-html="inner"></div>
  </div>

  <script>


    // 实例化 vue 对象
    const vm = new Vue({
      el: '.app', // 挂载的元素，能使用 vue 语法的元素
      data: { // 定义 vue 数据，data 中的数据会添加到 vue 实例中
        title: '我是标题',
        inner: '<div style="font-size: 20px">我是一个<b style="color: red">元素</b></div>'
      }
    })

    console.log(vm)


  </script>
</body>
</html>